<template>
	<view class="container" v-if="show" :style="{'color':color,
	'backgroundColor':bgcolor,
	}">
	<view class="" style="width: 100%;" :style="{'height':`${systemBarHeight}px`,'backgroundColor':bgcolor}"></view>
		<view class="" style="position: relative;">
			<image v-if="backshow" class="imgleft" src="/static/xxnmdiypages/left.png" mode="" @click="fnclick()"></image>
			<text class="title" :style="{'height':`${45}px`}">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: '首页'
			},//头部标题
			bgcolor: {
				type: String,
				default: '#fff'
			},//背景色
			color: {
				type: String,
				default: '#000'
			},//文字颜色
			show: {
				type: [Boolean,String],
				default: false
			},//是否显示自定义头部，true显示
			backshow:{
				type:Boolean,
				default: true
			},//返回按钮显示，true显示
			url:{
				type:String,
				default:''
			},//返回指定页面路径，空返回上一页
		},
		name: "xxnmheader",
		data() {
			return {
				systemBarHeight: '',//状态栏的高度
			};
		},
		created() {
			this.getsystem()
		},
		methods: {
			fnclick() {
				if(this.url==''){
					uni.navigateBack({
						delta: 1
					})
				}else{
					uni.redirectTo({
						url:this.url
					})
				}
				
			},
			getsystem() {
				let that=this
				uni.getSystemInfo({
					success: res => {
						that.systemBarHeight = res.statusBarHeight;
						console.log(that.systemBarHeight)
					}
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 750rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		position: relative;
		font-size: 32rpx;

		.title {
			width: 100%;
			font-weight: bolder;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.imgleft {
			width: 36rpx;
			height: 36rpx;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 20rpx;
		}
	}
</style>
